<template>
  <div id="indexView">
    <a-row :gutter="[16, 16]">
      <!-- 题目 -->
      <a-col :lg="11" :xs="24">
        <question-board :level="level" />
      </a-col>
      <!-- sql编辑 -->
      <a-col :lg="13" :xs="24">
        <sql-editor 
        :level="level"
        ></sql-editor>
        <a-collapse v-model:activeKey="activeKeys" class="collapse">
          <a-collapse-panel key="res" header="查看执行结果" :accordion = true>
            <SqlResult></SqlResult>
          </a-collapse-panel>
          <a-collapse-panel key="tis" header="查看提示" :accordion = true>
            <p>{{ level.hint }}</p>
          </a-collapse-panel>
          <a-collapse-panel key="sql" header="查看建表语句" :accordion = true>
            <CodeEditor 
            :ininitSQLit =level.initSQL >
           </CodeEditor>
          </a-collapse-panel>
          <a-collapse-panel key="ans" header="查看答案" >
            <p>{{ level.answer }}</p>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
import { computed,ref} from "vue";
import QuestionBoard from "../components/QuestionBoard.vue"
import SqlEditor from "../components/SqlEditor.vue"
import CodeEditor from "../components/CodeEditor.vue"
import SqlResult from "../components/SqlResult.vue"
import {allLevels,getLevelByKey}from "../levels/level"
const props = defineProps(['levelKey']);
const defaultActiveKeys = ["res"];
const activeKeys = ref([...defaultActiveKeys]);
const level = computed(() => {
  if (props.levelKey) {
    return getLevelByKey(props.levelKey);
  }
  return allLevels[0];
});
</script>
<style scoped>
.collapse{
  margin-top: 16px;
}
</style>
